<script>
import request from '@/utils/request'
import * as echarts from 'echarts';


//小说分类书籍数量排行
const option = {
  textStyle: {
    color: '#fff',
    fontSize: 10
  },
  title: {
    text: '小说分类书籍数量排行',
    textStyle: {
      color: '#fff'
    },
    left: 'center'
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar',
    }
  ]
};

//小说分类占比
const option2 = {
  textStyle: {
    color: '#fff'
  },
  title: {
    text: '小说分类占比',
    textStyle: {
      color: '#fff'
    },
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(71,69,69,0.5)',
        }
      }
    }
  ]
};

//小说分类人气趋势图
const option3 = {
  textStyle: {
    color: '#fff'
  },
  title: {
    text: '小说分类人气趋势图',
    textStyle: {
      color: '#fff'
    },
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
//小说人气与分类关系雷达图
const option4 = {
  textStyle: {
    color: '#fff'
  },
  title: {
    text: '小说人气与分类关系雷达图',
    textStyle: {
      color: '#fff'
    },
    left: 'center'
  },
  legend: {
    data: [],
    bottom: '10%',
    textStyle: {
      color: '#fff'
    }
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
      ]
    }
  ]
};

//排名前十二小说字数排行
const option5 = {
  textStyle: {
    color: '#fff'
  },
  title: {
    text: '小说字数排行',
    textStyle: {
      color: '#fff'
    },
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      type: 'bar',
      data: [100, 100, 100, 100, 100, 100]
    },

  ]
};

export default {
  name: "Home",

  data() {
    return {
      from: {},
      options: [],
      lineBox: null,
      currentTime: '',
      currentDay: this.getDayOfWeek(),
    }
  },
  created() {
    this.getPopularity()
  },
  methods: {


    //小说分类书籍数量排行
    getBookSortNum(){
      this.lineBox = echarts.init(document.getElementById('barBox'));
      request.get('/show/bookSortNumber').then(res => {
        //console.log(res.data.map(item => item.name))
        option.xAxis.data = res.data.map(item => item.name)
        //console.log(option.xAxis.data)
        option.series[0].data = res.data.map(item => item.value)
        this.lineBox.setOption(option);

      })
    },

    //小说分类占比
    getPercentage(){
      this.charBox = echarts.init(document.getElementById('charBox'));
      request.get('/show/category/percentage').then(res => {
        //console.log(res.data)
        option2.series[0].data = res.data.map(item => ({value: item.value, name: item.name}))
        this.charBox.setOption(option2);
      })
    },
    //小说分类人气排行
    getPopularityRanking(){
      this.lineBox2 = echarts.init(document.getElementById('lineBox1'));
      request.get('/show/category/popularity-ranking').then(res => {
       // console.log(res.data)
        option3.xAxis.data = res.data.map(item => item.name)
        option3.series[0].data = res.data.map(item => item.value)
        this.lineBox2.setOption(option3);
      })
    },
    //小说人气与分类关系雷达图
    getRelation(){
      this.lieBox = echarts.init(document.getElementById('lieBox'));
      request.get('/show/category/popularity-relation').then(res  => {
        //console.log(res.data)
        option4.radar.indicator = res.data.indicators.map(item => ({name: item.name, max: 100}))
        option4.series[0].data = res.data.seriesData.map(item => ({value: item.value, name: item.name}))
        option4.legend.data = res.data.seriesData.map(item => item.name)
        this.lieBox.setOption(option4);
      })
    },
    //排名前十二小说字数排行
    getWordsRanking(){
      this.lineBox3 = echarts.init(document.getElementById('barBox2'));
      request.get('/show/word-count-top12').then(res => {
        option5.yAxis.data = res.data.map(item => item.name)
        option5.series[0].data = res.data.map(item => item.value)
        this.lineBox3.setOption(option5)
      })
    },
    //小说人气排行
    getPopularity(){
      request.get('/show/popularity-top12').then(res => {
        this.options = res.data
        console.log(this.options)
      })
    },

    updateTime() {
      this.currentTime = new Date().toLocaleTimeString(); // 更新当前时间
    },
    getDayOfWeek() {
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      const date = new Date();
      return days[date.getDay()];
    }
  },
  mounted() {

    this.getBookSortNum()

    this.getPercentage()

    this.getPopularityRanking()

    this.getRelation()

    this.getWordsRanking()

    this.updateTime();
    this.interval = setInterval(this.updateTime, 1000); // 每秒更新时间

  },
  beforeDestroy() {
    clearInterval(this.interval); // 组件销毁前清除定时器
  }
}
</script>

<template>
  <div class="bg">
    <div>
      <div
          style="color: #fff;display: flex;justify-content: space-between;margin-top: 20px;margin-left: 40px;margin-right: 40px;height: 70px">
        <div style="margin-top: 15px;">
          <div>
            {{ currentTime }}
          </div>

        </div>
        <div style="text-align: center;">
          <div style="border: rgba(237, 239 ,242, 0.5) solid 1px;width: 300px;height:60px;background-color: rgb(4 26 64);font-size: 20px;font-weight: bolder;">
            <div style="margin-top: 15px;">
              七猫小说数据可视化平台
            </div>

          </div>

        </div>
        <div style="margin-top: 15px;">
          <div>
            星期{{ currentDay }}
          </div>

        </div>
      </div>
      <div style="margin-top: 8px;margin-left: 40px;margin-right: 40px;display: flex;justify-content: space-between;">
<!--  左     -->
        <div>
          <div id="barBox"
               style="width: 350px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px">
          </div>
          <div id="charBox"
               style="width: 350px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px;margin-top: 8px;">
          </div>
        </div>
<!--  中     -->
        <div>
          <div
               style="width: 430px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px">
            <div style="font-size: 18px;color: white;font-weight: bold;text-align: center">小说人气榜单</div>
            <div v-for="item in options" :key="item.id" style="display: flex;justify-content: space-between;margin: 10px 10px;color: white">
              <div>{{ item.title }}</div>
              <div>{{ item.author }}</div>
              <div>{{item.number}}</div>
            </div>
          </div>
          <div id="barBox2"
              style="width: 430px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px;margin-top: 8px;">

          </div>
        </div>
<!--   右     -->
        <div>
          <div id="lineBox1"
               style="width: 350px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px">
          </div>
          <div id="lieBox"
               style="width: 350px;height:260px;border: rgba(237, 239 ,242, 0.5) solid 1px;background-color: rgb(8 44 97);border-radius: 10px;margin-top: 8px;">
          </div>
        </div>
      </div>



    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.bg {
  background-image: url('../assets/v2_q9y78p.png');
  background-size: cover;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: -1;
  position: fixed;
}
</style>